<template>
  <div id="app">
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/> -->
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getPosts, Post } from '@/api/index'

export default Vue.extend({
  data (): {
    posts: Post[];
    count: number;
    } {
    return {
      posts: [],
      count: 0
    }
  },

  async created () {
    const posts = await getPosts()
    this.posts = posts
  },

  methods: {
    increment () {
      this.count++
    }
  }
})
</script>

<!--<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { getPosts, Post } from '@/api/index'

@Component
export default class App extends Vue {
  count = 0
  posts: Post[] = []

  increment () {
    this.count++
    // this.count.abc()
  }

  async created () {
    const posts = await getPosts()
    this.posts = posts
  }
}
</script>-->

<!--<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data () {
    return {
      count: 0
    }
  },

  methods: {
    increment () {
      this.count++
      // this.count.substr()
    }
  }
})
</script>-->

<!--<script>
export default {
  data () {
    return {
      count: 0
    }
  },

  methods: {
    increment () {
      this.count++
      // this.count.substr()
    }
  }
}
</script>-->

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
